<template>
    <div id="app" style="display:flex;justify-content: center;align-items: center;background-color: #E9EEF3;">

        <!-- <transition name="el-zoom-in-center"> -->
            <div style="width: 1600px;height:800px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                <el-container style="height: 100%;">
                    <el-header style="height: 100px;display:flex;align-items: center;">
                        <svg-icon icon-class="Logo" style="width:80px;height:80px;margin-right: 20px;" />
                        <svg-icon icon-class="title" style="width:200px;height:100px;margin-right: 10px;" />
                    </el-header>
                    <el-container>
                        <el-aside width="800px"
                            style="line-height: 0;display:flex;justify-content: center;align-items: center;">
                            <svg-icon icon-class="background1"
                                style="width:700px;height:600px;margin-right: 10px;background-color: white;" />
                        </el-aside>
                        <el-main
                            style="display:flex;justify-content: flex-start;align-items: center;flex-direction: column;">

                            <div
                                style="width: 50%;height:100px;display:flex;justify-content: center;align-items: flex-start;flex-direction: column;margin-bottom: 95px;">
                                <div style="font-weight: 700;font-size: x-large;">用户登录</div>
                                <div>深工软件注册系统</div>
                            </div>
                            <div style="width: 50%;">
                                <el-form label-position="left" label-width="50px" :model="loginForm"
                                    style="display: flex;flex-direction: column;align-items: flex-start;">
                                    <el-form-item label="账号">
                                        <el-input v-model="loginForm.username" style="width:400px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="pass">
                                        <el-input type="password" v-model="loginForm.password" autocomplete="off"
                                            @keyup.enter.native="userLogin" style="width:400px"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <!-- <el-checkbox-group > -->
                                        <el-checkbox label="记住密码" v-model="loginForm.checked"></el-checkbox>
                                        <!-- </el-checkbox-group> -->
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="userLogin"
                                            style="width: 400px;margin-top: 20px;">登录</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-main>
                    </el-container>
                </el-container>
            </div>
        <!-- </transition> -->


    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                checked: false
            },

        }
    },
    methods: {
        async userLogin() {
            let resOfUserLogin = await request({
                url: "/user/api/login",
                method: 'POST',
                data: this.loginForm
            })
            if (resOfUserLogin.data.status == 200) {
                if (this.loginForm.checked == true) {
                    localStorage.setItem("account", this.loginForm.username)
                    localStorage.setItem("password", this.loginForm.password)
                } else {
                    localStorage.removeItem("account")
                    localStorage.removeItem("password")
                }
                localStorage.setItem("token", resOfUserLogin.data.data)
                this.$router.go(-1)
            }
        }
    },
    beforeMount() {
        this.loginForm.username = localStorage.getItem("account")
        this.loginForm.password = localStorage.getItem("password")
        if (this.loginForm.username != null && this.loginForm.password != null) {
            this.loginForm.checked = true
        }
    }
}
</script>

<style scoped>
.el-header {
    background-color: white;
    color: #333;
    text-align: center;
}

.el-aside {
    background-color: white;
    color: #333;
    text-align: center;
    /* line-height: 200px; */
}

.el-main {
    background-color: white;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
}

#app {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
}
</style>